<template>
	<div class="wait_pay" id="waitPay">
		<div class="top">
			<div id="wait_box">
				<div class="wait_pay_scroll_box">	
					<div class="item" v-for="item in goodsList">
						<!-- <div class="img">
							<img src="http://hxypic.oss-cn-hangzhou.aliyuncs.com/%E9%BB%98%E8%AE%A4-%E5%BA%97%E5%91%98%E5%AE%9D.png" alt="">
						</div> -->
						<div class="text">
							<p>{{item.productName}}<span v-if="item.specs && Array.isArray(item.specs) && item.specs.length">[{{item.specs.join(",")}}]</span></p>
							<p class="text_number" v-text="'￥'+item.salesPrice"></p>
						</div>
						<div class="num">
							&times;{{item.quantity}}
						</div>
						<div class="sub-items" v-if="item.masterItemDtos && Array.isArray(item.masterItemDtos) && item.masterItemDtos.length">
							<div class="item" v-for="it in item.masterItemDtos">
								<div class="text">
									<p><i class="pei">配</i>{{it.productName}}</p>
									<p class="text_number" v-text="'￥'+it.salesPrice"></p>
								</div>
								<div class="num">
									&times;{{it.quantity}}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<form class="content">
			<div class="space"></div>
			<template v-if="storeId!='e7fe460c-6241-11ec-943b-458ddd3ef130'">
				<div class="account">
					<div class="c1">备注(选填)</div>
					<div class="c2"><input type="text" v-model="notes" placeholder="请输入口味、偏好等要求"></div>
				</div>
			</template>
			<template v-else>
				<div class="account">
					<div class="c1">备注</div>
					<div class="c2"><input type="text" v-model="notes" placeholder="配送地址、电话号码请填写在此栏"></div>
				</div>
			</template>
			<div class="space"></div>
			<div class="account">
				<div class="c1">座位号</div>
				<div class="c2"><input type="text" disabled="disabled" v-model="tableNo" placeholder="请输入座位号" id="mobile" @click="clickInput($event)"></div>
			</div>
			<div class="space"></div>
			<div class="vipInfo" v-if="vipData">
				<div class="tit">会员信息</div>
				<div class="info">
					<div class="name"><span style="color:#dc6060;font-size:.24rem;">会员名称:{{vipData.name}}, </span><span style="color:#dc6060;font-size:.24rem;">会员余额:{{vipData.memberAccount.totalAmount}}</span></div>
					<span style="color:#dc6060;font-size:.24rem;" @click.stop="relieveMember()">解除会员绑定</span>
				</div>
			</div>
			<div class="space"></div>
			<div class="account">
				<div class="c1">绑定优惠</div>
				<div class="c2" v-if="!couponInfo || (Array.isArray(couponInfo)&&!couponInfo.length)"><span style="color:#dc6060;font-size:.24rem;" @click.stop="showSelCoupon">绑定优惠</span></div>
				<div class="c2" v-if="Array.isArray(couponInfo)&&couponInfo.length"><span style="color:#dc6060;font-size:.24rem;" @click.stop="relieveCoupon()">移除优惠券</span></div>
			</div>
			<!-- <div class="account">
				<div class="c1">员工手机号(选填)</div>
				<div class="c2"><input type="text" v-model="phone" placeholder="请输入员工手机号"></div>
			</div> -->
			<div class="space"></div>
			<div class="goods_total">
				<div class="item">
					<span class="name">总计</span>
					<span class="num" v-text="'￥'+totalData.total.toFixed(2)"></span>
				</div>
				<div class="item">
					<span class="name">优惠</span>
					<span class="num" v-text="'￥'+totalData.discount.toFixed(2)"></span>
				</div>
				<div class="item">
					<span class="name">合计</span>
					<span class="num" v-text="'￥'+totalData.amount.toFixed(2)"></span>
				</div>
			</div>
			<div class="space"></div>
			<div class="bottom">
				<div class="price">
					<span>支付金额</span>
					<span class="price_number" v-text="'￥'+totalData.amount"></span>
				</div>
				<div class="btn">
					<button type="button" @click="beforeSurePay">确认支付</button>
				</div>
			</div>
		</form>
		<div class="sel-emps" v-if="showSelEmp" @click.stop="showSelEmp=false">
			<div class="sel-emps-wrap" @click.stop="">
				<div class="tit">请选择你喜欢的配送人员</div>
				<div class="emp-item" v-for="(it,ind) in emps" :key="ind">
					<div class="emp-item-inner-wrap">
						<span class="left">
							<img @click.stop="doShowImage(it.photo)" :src="`${it.photo}?x-oss-process=image/resize,l_300`" class="avatar" alt="">
							<div class="name">{{it.name}}</div>
						</span>
						<span class="sel" @click="selEmp(it)">选择TA</span>
					</div>
				</div>
			</div>
		</div>
		<div class="img-mask" v-if="showImage" @click.stop="showImage=false;">
			<img :src="imgUrl" alt="" @click.stop="">
		</div>
		<div class="code" v-if="isqrcode" @click="isqrcode=false;blurBtn=false;">
            <div class="form-wrap" @click.stop="">
                <div class="form-item">
                    <div class="form-name">*手机号</div>
                    <div class="item-cont">
                        <input type="tel" v-model="vipForm.mobile" placeholder="请输入手机号"/>
                    </div>
                </div>
				<div class="form-item">
                    <div class="form-name">*验证码</div>
                    <div class="item-cont">
                        <input type="text" v-model="vipForm.code" style="padding-right:2rem" placeholder="请输入验证码"/>
                        <span class="get-code" @click.stop="getCode">{{codeInfo}}</span>
                    </div>
                </div>
                <button class="sub-btn" @click.stop="submitVip">确定</button>
            </div>
        </div>
		<!-- couponList -->
        <div class="coupon-wrap" v-if="showCouponList" @click="showCouponList=false">
            <div class="inner-wrap">
                <div class="couponList" :class="{all_height:(!nowSelCouponGoods||!nowSelCouponGoods.productName)}" @click.stop="">
                    <ul>
                        <li class="coupon-item" :class="{active:(nowSelCoupon&&nowSelCoupon.id==it.id)}" v-for="it in couponList" @click="selCoupon(it)" :key="it.id">
                            <div class="name">{{it.title}}</div>
                            <div class="coupon-name">{{it.productName}}</div>
                            <div class="coupon-time">
                                有效日期：<i>{{new Date(it.beginTime).Format("yyyy/MM/dd hh:mm")}} ~ {{new Date(it.endTime).Format("yyyy/MM/dd hh:mm")}}</i>
                            </div>
                        </li>
                    </ul>
                </div>
                <p class="sel-info" v-if="nowSelCouponGoods&&nowSelCouponGoods.productName">
                    <span>*当前选择的优惠券抵扣商品是：{{nowSelCouponGoods.productName}}</span>
                </p>
                <span class="sure" @click.stop="submitSelCoupon">确认</span>
            </div>
        </div>
        <div class="pei-goods-wrap" style="z-index:101;bgackground:rgba(0,0,0,.59);" v-if="showCouponGoods" @click="showCouponGoods = false">
            <div class="inner-wrap" @click.stop="">
                <div class="pei-goods" style="max-height:4.5rem">
                    <div class="item" v-for="(it,ind) in couponGoods" :class="{active:(nowSelCouponGoods&&nowSelCouponGoods.productId==it.productId)}" @click="modifyCouponGoods(it)" :key="ind">
                        <div class="info">
                            <div class="item-name">{{it.productName}}</div>
                        </div>
                    </div>
                </div>
                <span class="sure" @click.stop="submitSelCouponGoods">确认</span>
            </div>
        </div>
        <!--  -->
	</div>
</template>
<script type="javascript">
import {API_BASE_URL} from "./../urlConfig/index";
	export default {
		props: ['openId',"storeId"], 
		data () {
			return {
				//
				couponInfo:null,
				canClick:true,
				nowSelCoupon:{},
				nowSelCouponGoods:{},
				couponGoods:[],
				couponList:[],
				showCouponGoods:false,
				showCouponList:false,
				//
				vipForm:{
					mobile:"",
					code:"",
				},
	            codeInfo:"获取验证码",
				isqrcode:false,
				// 
				showImage:false,
				imgUrl:"",
				showSelEmp:false,
				nowSelEmp:undefined,
				emps:[],
				storeInfo:{},
				// 
				orderId:'',//订单id
				phone:'',//员工id
				tableNo:'',//座位号
				notes:'',//备注
				goodsList: [],//支付商品列表
				totalData: {
					amount:0,    //订单应付金额
					total:0,     //订单金额合计
					count:0,     //数量
					discount:0,  //优惠
				},
				payApiBtn: true,
				vipData:null,
				isBindCoupon:false,
				cashierPayBtn:true,
			}
		},
		methods:{
			selCoupon(it){
				this.nowSelCouponGoods = {};
				this.nowSelCoupon = it;
				this.couponGoods = it.products;
				if(Array.isArray(it.products) && it.products.length==1){
					this.nowSelCouponGoods = it.products[0];
				}
				if(Array.isArray(it.products) && it.products.length>1){
					this.showCouponGoods = true;
				}
				// this.showCouponList = false;
			},
			submitSelCoupon(){
				let productId = "";
				try {
					if(this.nowSelCoupon.products && Array.isArray(this.nowSelCoupon.products) && this.nowSelCoupon.products.length > 1){
						if(!this.nowSelCouponGoods || !this.nowSelCouponGoods.productName){
							this.$message({
								message: '请选择优惠券所需抵扣的商品',
								showClose: true,
								customClass: 'error'
							});
							return;
						}else{
							productId = this.nowSelCouponGoods.productId;
						}
					}else{
						let ids = this.nowSelCoupon.productId.split(",");
						if(ids.length > 1){
							productId = this.nowSelCoupon.products[0].productId;
						}else{
							productId = this.nowSelCoupon.productId;
						}
					}
				} catch (error) {
					this.$message({
						message: '优惠券选择有误，无对应商品优惠。',
						showClose: true,
						customClass: 'error'
					});
					return;
				}
				

				if(!this.nowSelCoupon.productId||!this.nowSelCoupon.code){
					this.$message({
						message: '请重新选择优惠券',
						showClose: true,
						customClass: 'error'
					});
					return;
				}

				if(!this.canClick){
					return;
				}
				this.canClick = false;

				this.$http.put(window.baseURL + 'v1/web/orders/'+this.orderId+'/attachCouponInstance?couponInstanceCode='+this.nowSelCoupon.code+"&productId="+productId).then((res)=>{

					setTimeout(()=>{
						this.canClick = true;
					},500);
					
					this.isBindCoupon = true;
					let body = res.data;
					this.goodsList = body.items;
					this.totalData = {
						count: body.count, // 总数量
						total: body.total, // 总计金额
						discount: body.discount, // 优惠金额
						amount: body.amount, // 最终价格
						removeZero: body.removeZero, // 最终价格
					}
					this.couponInfo = res.data.couponInstances;
					this.addGoodBtn = true;
					this.showCouponList = false;
				}).catch(()=>{
					setTimeout(()=>{
						this.canClick = true;
					},500);
					this.nowSelCoupon = {};
					this.nowSelCouponGoods = {};
					this.couponGoods = [];
				})
			},
			submitSelCouponGoods(){
				this.showCouponGoods = false;
				this.submitSelCoupon();
			},
			modifyCouponGoods(item){
				this.nowSelCouponGoods = item;
			},
			// 
			showSelCoupon(){
				if(!this.vipData || !this.vipData.id){
					this.isqrcode = true;
				}else{
					// 
					this.doShowCouponList();
				}
			},
			doShowCouponList(){
              if(this.isBindCoupon){
                  this.relieveCoupon();
                  return;
              }
              let choiceArrIds = [];
				if(this.goodsList && Array.isArray(this.goodsList) && this.goodsList.length){
					this.goodsList.forEach(it=>{
						choiceArrIds.push(it.productId);
					})       
				}
				this.$http({
					url:`${window.baseURL}v1/web/${this.vipData.id}/coupon-instance`,
					method:"GET",
					params:{
						storeId:this.storeId,
						page:0,
						size:1000
					}
				}).then(res=>{
					if(res.data.couponInstances && Array.isArray(res.data.couponInstances) && res.data.couponInstances.length){
							res.data.couponInstances.forEach(it=>{
								let products = [];
								let productIds = it.productId.split(",");
								let productNames = it.productName.split(",");
								console.log("productIds",productIds)
								if(productIds && Array.isArray(productIds) && productIds.length){
									productIds.forEach((ite,ind)=>{
										if(choiceArrIds.indexOf(ite)!=-1){
											let obj = {
												productId:ite,
												productName:productNames[ind]
											}
											products.push(obj);
										}
									})
								}
								it.products = products;
							})
						}
						console.log("res.data.couponInstances",res.data.couponInstances)
					this.couponList = res.data.couponInstances;
					if(!res.data.totalElements){
						this.$message({
							message: "暂无优惠券",
							showClose: true,
							customClass: 'error'
						});
						return;
					}
					this.showCouponList = true;
				})
			},
			relieveMember(){
				if(this.couponInfo && Array.isArray(this.couponInfo) && this.couponInfo.length || this.nowSelCoupon.code){
					this.relieveCoupon(true);
					return;
				}
				this.$http.put(window.baseURL+'v1/web/orders/'+this.orderId+'/relieveMember').then((res)=>{
					this.vipData = '';
					sessionStorage.removeItem("vipData");
					let body = res.data;
					this.goodsList = body.items;
					this.totalData = {
						count: body.count, // 总数量
						total: body.total, // 总计金额
						discount: body.discount, // 优惠金额
						amount: body.amount, // 最终价格
						removeZero: body.removeZero, // 最终价格
					}
					this.couponInfo = res.data.couponInstances;
				}).catch(()=>{

				})
				this.addGoodBtn = true;
				this.showCouponList = false;
				this.isBindCoupon = false;
				this.nowSelCoupon = {};
				this.nowSelCouponGoods = {};
			},
			relieveCoupon(relieveMember = false){
				let productId = "";
				// let nowSelCouponItem = sessionStorage.getItem("nowSelCouponItem") ? JSON.parse(sessionStorage.getItem("nowSelCouponItem")) : null;
				if(this.nowSelCouponGoods && this.nowSelCouponGoods.productId){
					productId = this.nowSelCouponGoods.productId
				}
				console.log("this.couponInfo",this.couponInfo)
				if(this.couponInfo && Array.isArray(this.couponInfo) && this.couponInfo.length){
					this.nowSelCoupon = this.couponInfo[0];
					this.nowSelCoupon.code = this.nowSelCoupon.couponInstanceCode;
				}
				this.$http.put(window.baseURL+'v1/web/orders/'+this.orderId+'/relieveCouponInstance?couponInstanceCode='+this.nowSelCoupon.code+"&productId="+productId).then((res)=>{
					if(relieveMember){
						this.$http.put(window.baseURL+'v1/web/orders/'+this.orderId+'/relieveMember').then((res)=>{
							this.vipData = '';
							sessionStorage.removeItem("vipData");
							let body = res.data;
							this.goodsList = body.items;
							this.totalData = {
								count: body.count, // 总数量
								total: body.total, // 总计金额
								discount: body.discount, // 优惠金额
								amount: body.amount, // 最终价格
								removeZero: body.removeZero, // 最终价格
							}
							this.couponInfo = res.data.couponInstances;
						}).catch(()=>{

						})
						this.addGoodBtn = true;
						this.showCouponList = false;
						this.isBindCoupon = false;
						this.nowSelCoupon = {};
						this.nowSelCouponGoods = {};
						return;
					}
					let body = res.data;
					this.goodsList = body.items;
					this.totalData = {
						count: body.count, // 总数量
						total: body.total, // 总计金额
						discount: body.discount, // 优惠金额
						amount: body.amount, // 最终价格
						removeZero: body.removeZero, // 最终价格
					}
					this.couponInfo = res.data.couponInstances;
					this.addGoodBtn = true;
					this.showCouponList = false;
					this.isBindCoupon = false;
					this.nowSelCoupon = {};
					this.nowSelCouponGoods = {};
				}).catch(()=>{

				})
			},
			// 
			submitVip(){
				if(!this.vipForm.mobile){
					this.$message({
							message: "请正确输入手机号",
							showClose: true,
							customClass: 'error'
						});
					return;
				}
				if(!(/^1[3456789]\d{9}$/.test(this.vipForm.mobile))){
					this.$message({
							message: "请正确输入手机号",
							showClose: true,
							customClass: 'error'
						});
					return;
				}
				if(!this.vipForm.code){
					this.$message({
							message: "请正确输入验证码",
							showClose: true,
							customClass: 'error'
						});
					return;
				}
				this.$http({
					url:window.baseURL+"v1/web/member/mobile",
					method:"GET",
					params:{
						mobile:this.vipForm.mobile,
						storeId:this.storeId,
						orderId:this.orderId,
						code:this.vipForm.code
					}
				}).then(res=>{
					this.vipData = res.data;
					sessionStorage.setItem("vipData",JSON.stringify(res.data));
					this.$message({
						message: '成功绑定会员',
						customClass: 'success'
					});
					this.goodsList = res.data.order.items;
					this.totalData = {
						count: res.data.order.count, // 总数量
						total: res.data.order.total, // 总计金额
						discount: res.data.order.discount, // 优惠金额
						amount: res.data.order.amount, // 最终价格
					}
					this.couponInfo = res.data.couponInstances;
					this.isqrcode = false;
					this.showSelCoupon();
				})
			},
			getCode(){
				if(!String(this.vipForm.mobile).trim()){
					this.$message({
						message: '请输入手机号',
						customClass: 'error'
					});
					return;
				}
				if (this.codeInfo != "获取验证码") {
					return;
				}
				this.$http({
				url:window.baseURL+"v1/web/member/mobile/code",
					method:"GET",
					params:{
						mobile:this.vipForm.mobile,
						storeId:this.storeId
					}
				}).then(res=>{
						clearInterval(this.timer);
						let time = 60;
						this.timer = setInterval(() => {
							time--;
							this.codeInfo = `${time}s`;
							if (time <= 0) {
								this.codeInfo = "获取验证码";
								clearInterval(this.timer);
							}
						}, 1000);
				});
			},
			 //订单备注
	        orderNotes(){
	            
        	},
			//获取订单信息
			getOrder(){
				this.$http.get('orders/'+this.orderId).then((res)=>{
					this.goodsList = res.data.items;
					this.totalData = {
						amount   : res.data.amount,
						total    : res.data.total,
						count    : res.data.count,
						discount : res.data.discount
					}
					this.couponInfo = res.data.couponInstances;
					if(res.data.memberId){
						// this.vipData = {
						// 	memberId:res.data.memberId,
						// 	memberMobile:res.data.memberMobile,
						// 	memberName:res.data.memberName,
						// }
					}
					
				})
			},
			doShowImage(url){
				console.log(url)
				this.imgUrl = url;
				this.showImage = true;
			},
			beforeSurePay(){
				if(this.storeInfo.deliveryEnabled){
					this.getEmps(true);
				}else{
					this.surePay();
				}
			},
			selEmp(it){
				this.showSelEmp = false;
				this.nowSelEmp = it.id;
				if(it){
					this.$http({
						url:`${window.baseURL}v1/pay/emp/work`,
						method:"GET",
						params:{
							empId:it.id
						}
					}).then(res=>{
						this.surePay();
					}).catch(err=>{
						this.getEmps();
						this.showSelEmp = true;
						console.log(err)
					})
				}else{
					this.$message({
						message: '请选择配送人员！',
						customClass: 'error'
					});
					this.showSelEmp = true;
					return;
				}
			},
			lastPay(){
				if(this.totalData.amount > this.vipData.memberAccount.totalAmount){
					this.$message({
						message: '会员余额不足，请先联系服务员进行会员充值!',
						showClose: true,
						customClass: 'error'
					});
					return;
				}
				let deliveryParams = {};
				if(this.storeInfo.deliveryEnabled){
					if(this.nowSelEmp){
						if(this.emps && Array.isArray(this.emps) && this.emps.length){
							this.emps.forEach(it=>{
								if(it.id == this.nowSelEmp){
									deliveryParams = {
										mobile:it.mobile,
										name:it.name,
									}
								}
							})
						}
					}else{
						this.$message({
							message: '请选择配送人员！',
							customClass: 'error'
						})
						this.payApiBtn = true;
						return;
					}
				}
				let data = {
					"orderId": this.orderId,
					"channel": "MEMBER",
					"authCode":"",
					"amount": (this.totalData.amount).toFixed(2),
					"tableNo": this.tableNo,
					"notes": this.notes,
					"coupon":this.couponInfo,
					...deliveryParams
				}
				if ( !this.cashierPayBtn ) {
					return;
				}
				this.cashierPayBtn = false;
				
				this.$http.put(window.baseURL + 'v1/web/payments/' + this.$uuid(), data).then((res)=>{
				// this.$http.put('payments/' + this.$uuid(), data).then((res)=>{
					this.cashierPayBtn = true;
					this.$message({
						message: '支付成功!',
						showClose: true,
						customClass: 'success'
					});
					this.$router.replace('/buySuccess/'+this.orderId);
					sessionStorage.removeItem('orderId');
				}).catch(()=>{
					this.cashierPayBtn = true;
				})
			},
			//确定支付
			surePay() {
				// if(!this.tableNo){
				// 	this.$message({
	            //         message: '请输入座位号',
	            //         customClass: 'error'
	            //     })
	            //     return;
				// }
				if(this.storeId == "e7fe460c-6241-11ec-943b-458ddd3ef130"){
					if(!this.notes){
						this.$message({
							message: '请输入备注',
							customClass: 'error'
						})
						return;
					}
				}

				if ( !this.payApiBtn ) {
					return;
				}
				this.payApiBtn = false;


				if(this.totalData.amount == 0 && this.vipData){
					this.lastPay();
					return;
				}


				let deliveryParams = {};
				if(this.storeInfo.deliveryEnabled){
					if(this.nowSelEmp){
						if(this.emps && Array.isArray(this.emps) && this.emps.length){
							this.emps.forEach(it=>{
								if(it.id == this.nowSelEmp){
									deliveryParams = {
										mobile:it.mobile,
										name:it.name,
									}
								}
							})
						}
					}else{
						if(this.emps && Array.isArray(this.emps) && this.emps.length){
							this.$message({
								message: '请选择配送人员！',
								customClass: 'error'
							})
							this.payApiBtn = true;
							return;
						}
					}
				}


				let _this = this;
	            // this.$http.get(API_BASE_URL+'v1/pay/web-pay?openId='+this.openId+'&orderId='+this.orderId+'&tableNo='+this.tableNo+'&phone='+this.phone+'&notes='+this.notes).then( (res) => {
					this.$http({
						url:`${API_BASE_URL}v1/pay/web-pay`,
						method:"GET",
						params:{
							openId:this.openId,
							orderId:this.orderId,
							tableNo:this.tableNo,
							phone:this.phone,
							notes:this.notes,
							...deliveryParams
						}
					}).then(res=>{
						m$.template({val: '',time: 1})
						WeixinJSBridge.invoke(
							'getBrandWCPayRequest', {
							"appId": res.data.appId,     //公众号名称，由商户传入
							"timeStamp": res.data.timeStamp,         //时间戳，自1970年以来的秒数
							"nonceStr": res.data.nonceStr, //随机串
							"package": res.data.package,
							"signType": res.data.signType,         //微信签名方式：
							"paySign": res.data.paySign //微信签名
						}, function (rese) {
							if (rese.err_msg == "get_brand_wcpay_request:ok") {
							// 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
								_this.lun();
							} else if (rese.err_msg == "get_brand_wcpay_request:fail") {
								this.payApiBtn = true;
								m$.template({
									val: '支付异常，请再次支付！',
									time: 1000,
									fn(){
									// _this.$router.replace('/orderList/0')
									}
								})
							} else if (rese.err_msg == "get_brand_wcpay_request:cancel") {
								this.payApiBtn = true;
							}
						});
                }).catch(()=>{
                	this.payApiBtn = true;
                })
			},
			lun() {
				this.$http.get(API_BASE_URL+"v1/pay/scan-code/query?orderId="+this.orderId).then((res)=>{
					if( res.status == 200 ){
						this.$message({
		                    message: '支付成功',
		                    customClass: 'success'
		                })
						sessionStorage.removeItem('orderId');
						this.$router.replace('/buySuccess/'+this.orderId);
					}else if( res.status == 202 ){
						setTimeout(()=>{
							this.lun();
						}, 1500);
					}
				}).catch()
			},
			// 点击input
			clickInput: function ( event ) {
				setTimeout( () => {
					// event.target.scrollIntoView(true);
				}, 100);
			},
			arraySort (array) {
				for (let i = array.length - 1; i >= 0; i--) {
					let randomIndex = Math.floor(Math.random() * (i + 1));
					let itemAtIndex = array[randomIndex];
					array[randomIndex] = array[i];
					array[i] = itemAtIndex;
				}
				return array;
			},
			getEmps(boo){
				this.$http.get(window.baseURL + 'v1/web/get/delivery?storeId='+this.storeId).then((res)=>{
					// res.data.sort(function () {
					// 	return Math.random() - 0.5
					// })
					if(res.data && Array.isArray(res.data)){
						this.emps = this.arraySort(res.data);
					}
					if(boo){
						if(!res.data || !Array.isArray(res.data) || !res.data.length){
							this.surePay();
							return;
						}
						this.showSelEmp=true;
					}
					if(res.data && Array.isArray(res.data) && res.data.length){
						// let randomCount = Math.floor(
						// 	Math.random() * res.data.length
						// );
						// this.nowSelEmp = res.data[randomCount].id;
					}
				})
			},
		},
		created() {
			m$.setTitle('支付');
			this.orderId = this.$route.params.id;
			this.getOrder();
			this.$http.get(window.baseURL + 'v1/web/store?storeId='+this.storeId).then((res)=>{
				this.storeInfo = res.data;
			})
			let vipData = sessionStorage.getItem("vipData");
			try {
				if(vipData){
					this.vipData = JSON.parse(vipData);
				}
			} catch (error) {
				
			}
			
		},
		mounted: function () {
			this.getEmps();
		 	m$.setTitle('支付');
	        this.$createScroll('wait_box');
	        // $(document).ready(()=>{
	  		// 	$('.wait_pay').height($(window).height());
			//   });
			  $("input").blur(function(){
				console.log('失去焦点')
				window.scrollTo(0,0);
			});
			try {
				let href = window.location.search.split("&")[2];
				this.tableNo = decodeURIComponent(href.split("=")[1]);
				console.log(this.tableNo);
			} catch (error) {
				console.log(error);
			}
	    },
	}
</script>
<style lang="scss" scoped>

	
	$color_red :#dc6060; 
	.wait_pay {
		width: 100%;
		height: 100%;
		background: #fff;
		overflow: auto;
		overflow-x: hidden;
		position: fixed;
		top: 0;
		bottom: 0;
		.top {
			width: 100%;
			height: 48%;
			position: relative;
			#wait_box {
				width: 100%;
				height: 100%;
				position: relative;
			}
			.wait_pay_scroll_box {
				width: 100%;
				.item {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					// box-sizing:border-box;
					min-height: 1rem;
					padding-bottom: 1rem;
					background-color: #fff;
					display: -webkit-flex; /* Safari */
  					display: flex;
  					font-size: .3rem;
  					margin: 0 .25rem;
  					padding: 0.2rem 0;
  					border-bottom: 1px solid #f2f2f2;
  					// .img {
  					// 	flex:100;
  					// 	background-color: #ccc;
  					// 	img {
  					// 		height: 100%;
  					// 		width:100%;
  					// 	}
  					// }
  					.text {
  						flex:470;
  						p {
  							font-size: .28rem;
  							margin:.17rem;
  							color: #444;
  						}
  						.text_number {
  							font-size: .32rem;
							color: $color_red;
  						}
  					}
  					.num {
  						line-height: 1rem;
  						text-align: center;
  						font-size: .32rem;
						color: #999;
  						flex:100;
  					}
				}
			}
		}
		.content {
			width: 100%;	
			height: 50%;
  			font-size: .32rem;
  			.space {
  				height: .1rem;
  				background-color: #f4f4f4;
  			}
  			.account {
  				// box-sizing:border-box;
  				height: .6rem;
				line-height: .6rem;
				display: -webkit-flex; /* Safari */
	  			display: flex;
  				background-color: #fff;
  				padding: .15rem .2rem;
				.c1 {
					flex:1;
				}
				.c2 {
					flex:2;
					text-align: right;
					border-bottom: 1px solid #ccc;
					input {
						border: none;
						background:none;
						text-align: center;
						width:100%;
						font-size: .259rem;
					}
				}
  			}
  			.goods_total {
  				height: calc( 100% - 3rem );
				background-color: #fff;
				padding: 0 4%;
				.item {
					display: -webkit-flex; /* Safari */
	  				display: flex;
	  				height: .8rem;
	  				line-height: .8rem;
	  				.name {
	  					flex:1;
	  				}
	  				.num {
	  					flex:1;
	  					text-align: right;
	  					color: $color_red;
	  				}
				}
  			}
			.bottom {
				height: 1rem;
				line-height: 1rem;
				background-color: #fff;
				display: -webkit-flex; /* Safari */
	  			display: flex;
	  			font-size: .32rem;
				box-sizing:border-box;
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
	  			padding: 0 .1rem;
				.price {
					flex:520;
					font-size: .32rem;
					font-weight: 600;
					color: $color_red;
					.price_number {
						font-size: .36rem;
						margin-left: .2rem;
					}
				}
				.btn {
					flex:200;
					text-align: right;
					button {
						background:none;
						border: none;
						height: .6rem;
						padding: 0 .3rem;
						font-size: .32rem;
						background-color: $color_red;
						color: #fff;
						border-radius: 10rem;
					}
				}
			}
		}
	}
	.sub-items{
		width: 100%;
		.item{
			padding: 0 !important;
			margin: 0 !important;
			padding-left: .25rem !important;
			box-sizing: border-box !important;
		}
		.pei{
			display: inline-block;
			font-size: .25rem;
			background-color: #dc6060;
			color: #fff;
			border-radius: .1rem;
			padding: .1rem .1rem;
			margin-top: .1rem;
			margin-right: .1rem;
		}
	}
	.sel-emps{
		position: fixed;
		top:0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,.5);
		z-index: 9;
		.tit{
			font-size: .28rem;
			width: 100%;
			padding-bottom: .2rem;
			font-weight: bold;
		}
		.sel-emps-wrap{
			position: absolute;
			top: 50%;
			left: 50%;
			width:80%;
			min-height: 3rem;
			max-height: 50%;
			overflow: hidden;
			overflow-y: auto;
			transform: translate(-50%,-50%);
			background-color: #fff;
			border-radius: .1rem;
			display: flex;
			flex-wrap: wrap;
			padding: .25rem;
			box-sizing: border-box;
			.emp-item{
				width: 100%;
				margin: .25rem 0;
				padding: 0 .25rem;
				box-sizing: border-box;
				.emp-item-inner-wrap{
					width: 100%;
					text-align: center;
					display: flex;
					align-items: center;		
					justify-content: space-between;
					.left{
						display: flex;
						align-items: center;
					}
					.avatar{
						width: 1.25rem;
						height:1.25rem;
						border-radius: .75rem;
						background-color: #ccc;
						object-fit: cover;
					}
					.name{
						font-size: .26rem;
						padding: .15rem 0;
						text-align: center;
						/* width: 100%; */
						/* margin: 0 auto; */
						overflow: hidden;
						text-overflow: ellipsis;
						padding-left: .2rem;
					}
					.sel{
						justify-self: flex-end;
						display: flex;
						font-size: .24rem;
						background-color: #dc6060;
						color:#fff;
						/* width: 1rem; */
						height: .5rem;
						border-radius: .25rem;
						justify-content: center;
						align-items: center;
						/* margin: 0 auto; */
						padding: 0 .1rem;
						white-space: nowrap;
					}
				}
			}
		}
	}
	.img-mask{
			position: fixed;
			top:0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0,0,0,.5);
			overflow: hidden;
			overflow-y: auto;
			z-index: 10;
			img{
				width: 80%;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}
		}
		.code {
		position: fixed;
		top:0;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 3;
		background-color: rgba(0,0,0,0.59);
		.qrcode {
			z-index: 2;
		}
		#qrcode,.tit2{
			width: 2.5rem;
			height: 2.5rem;
			position: absolute;
			bottom:27%;
			left: 50%;
			background-color: #ccc;
			transform: translateX(-50%);
		}
		.tit2{
			bottom: 30%;
			width: 100%;
			background-color: transparent;
			padding-left: 20%;
			color: #fff;
			font-size: .32rem;
			font-weight: bold;
		}
		.form-wrap{
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 50%;
			background-color: #fff;
			width: 80%;
			border-radius: 5px;
			text-align: center;
			.tit{
				font-size: .32rem;
				font-weight: bold;
				text-align: left;
				padding: .2rem;
			}
			.form-item{
				padding: .25rem .35rem 0 .35rem;
				.form-name{
					width: 100%;
					text-align: left;
					padding-bottom: .1rem;
					font-size: .25rem;
					color: #db5f32;
				}
				.item-cont{
					width: 100%;
					position: relative;
					input{
						width: 100%;
						text-align: left;
						margin: 0;
						border: none;
						box-sizing: border-box;
						background:none;
						font-family: ".PingFangSC";
						font-size: .28rem;
						height: .7rem;
						border: 1px solid #ddd;
						border-radius: .1rem;
						padding-left: .1rem;
					}
					.get-code{
						position: absolute;
						bottom: 0;
						right: 0;
						display: inline-block;			
						width: 2rem;
						height: .7rem;
						line-height: .7rem;
						text-align: center;
						background-color: #ccc;
						color: #fff;
						font-size: .25rem;
					}
				}
			}
			.sub-btn{
				width: calc(100% - .7rem);
				height: .7rem;
				border: none;
				background-color: #db5f32;
				color: #fff;
				border-radius: .1rem;
				margin: .25rem 0;
			}
		}
		.tit2{

		}
		.tip{
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 20%;
			color: #ccc;
			font-size: .25rem;
			width: 100%;
			white-space: nowrap;
			text-align: center;
		}
		.vip-charge{
			font-size: .3rem;
			width: 3rem;
			height: .68rem;
			border:1px solid #db5f32;
			border-radius: .34rem;
			text-align: center;
			line-height: .68rem;
			color: #db5f32;
			position: absolute;
			bottom: 10%;
			left: 50%;
			transform: translate(-50%,0);
		}
		 
	}
	.coupon-wrap {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.25);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: .24rem;
    z-index: 100;

    .inner-wrap {
      width: 100%;
      height: 50%;
      overflow: hidden;
      overflow-y: auto;
      box-sizing: border-box;
      padding: .25rem;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: #fff;

      .couponList {
        height: calc(100% - 2rem);
        overflow: hidden;
        overflow-y: auto;
        padding: .25rem;
        box-sizing: border-box;
        border-bottom: 1px solid #ddd;

        .coupon-item {
          width: 100%;
          background: #fff;
          box-shadow: 0rem .1rem .15rem rgba(0, 0, 0, .25);
          margin-bottom: .25rem;
          border-radius: .1rem;
          text-align: center;
          box-sizing: border-box;
          padding: .25rem .15rem;

          .name {
            width: 100%;
            padding-bottom: .35rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: .3rem;
            font-weight: bold;
            color: rgb(237, 106, 97);
          }

          .coupon-name {
            width: 100%;
            padding-bottom: .30rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: .3rem;
            color: rgb(237, 106, 97);
          }

          .coupon-time {
            i {
              color: #4bb7d6;
            }
          }

          &.active {
            background-color: rgb(249, 115, 110);

            .name,
            .coupon-name {
              color: #fff;
            }

            .coupon-time {
              i {
                color: #fff;
              }
            }
          }
        }

        &.all_height {
          height: calc(100% - 1.5rem);
        }
      }

      .sel-info {
        width: 100%;
        font-size: .25rem;
        height: .5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: .3rem;
        color: rgb(237, 106, 97);
        padding-top: .2rem;
      }

      .sure {
        margin-top: .25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 1rem;
        width: 100%;
        font-size: .3rem;
        color: #fff;
        padding: .1rem .2rem;
        box-sizing: border-box;
        border-radius: .1rem;
        background-color: #dc6060;
      }
    }

  }
    .pei-goods-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 101 !important;

    .inner-wrap {
      width: 90%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      .pei-goods {
        max-height: 3.5rem;
        overflow: hidden;
        overflow-y: auto;
        width: 100%;
        background-color: #fff;
        border-radius: .2rem;
        padding: .15rem;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;

        // justify-content: space-around;
        .item {
          // width: 1.5rem;
          width: 30%;
          height: 1.5rem;
          font-size: .3rem;
          padding: .25rem .2rem;
          box-sizing: border-box;
          background-color: #f4f4f4;
          border-radius: .1rem;
          margin-right: .1rem;
          margin-bottom: .1rem;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;

          .info {
            width: 100%;
          }

          .item-price {
            color: #dc6060;
            padding-top: .1rem;
            width: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }

          .item-name {
            padding-right: .1rem;
            width: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            word-break: break-all;
          }

          .changeNumber {
            color: #dc6060;
            width: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            word-break: break-all;
          }

          &.active {
            background-color: rgb(0, 117, 185);
            color: #fff;
          }
        }
      }

      .sure,.cancel {
        margin-top: .25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 1rem;
        width: 100%;
        font-size: .3rem;
        color: #fff;
        padding: .1rem .2rem;
        box-sizing: border-box;
        border-radius: .1rem;
        background-color: #dc6060;
      }
      .cancel{
        background-color: #ccc;
        color: #333;
      }
    }

    &.spec-wrap {
      .spec-name {
        width: 100%;
        font-size: .3rem;
        font-weight: bold;
        padding: .159rem 0;
      }

      .pei-goods {
        border-radius: 0;
      }

      .pei-wrap {
        display: block;
      }

      .item {
        .item-name {
          font-size: .25rem;
        }
      }
    }
	
  }
  .vipInfo{
		display: flex;
		flex-wrap: nowrap;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		min-height: 0.9rem;
		padding: 0.15rem 0.2rem;
		box-sizing: border-box;
		.tit{
			white-space: nowrap;
		}
		.info{
			width:calc(100% - 1.5rem);
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 0.24rem;
			vertical-align: middle;
			.name{
				display: inline-block;
				width: calc(100% - 1.5rem);
			}
		}
	}
</style>